<script setup name="informDetail">
import informHttp from '@/api/informHttp';
import { ref, reactive, onMounted, computed, watch } from "vue"
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';
import { useRoute } from 'vue-router';

const route = useRoute()

let inform = reactive({
    title: '',
    content: '',
    create_time: '',
    author: {
        realname: '',
        department: {
            name: ''
        }
    },
    read_count: 0
})

onMounted(async () => {
    // 用这种方法可以拿到pk
    const pk = route.params.pk
    try{
        let data = await informHttp.getInformDetail(pk)
        // 有就给，没有就算了不会报错
        Object.assign(inform, data)
    }catch(detail){
        ElMessage.error(detail)
    }
    await informHttp.readInform(pk)
})

</script>

<template>
<OAMain title="通知详情">
    <el-card>
        <template #header>
            <div style="text-align: center;">
                <h2 style="padding-bottom: 20px;">{{ inform.title }}</h2>
                <div>
                    <span style="margin-right: 20px;">发布自： {{ inform.author.realname }}</span>
                    <span>发布于： {{ timeFormatter.stringFromDate(inform.create_time) }}</span>
                </div>
            </div>
        </template>
        <template #default>
            <div v-html="inform.content" class="content"></div>
        </template>
        <template #footer>
            阅读量：{{ inform.read_count }}
        </template>
    </el-card>
</OAMain>


</template>


<style>
.content ::v-deep(img){
    max-width: 100%;
}
</style>
